<template>
    <el-container>
        <el-main>
            <div>
                <el-input v-model="word" placeholder="请输入内容"></el-input>
            </div>
            <div>
                <el-input v-model="url2" placeholder="请输入内容"></el-input>
            </div>
            <div><el-slider v-model="hei"></el-slider></div>
            <div width="2000px" class="div1" >

                <el-upload
                    :auto-upload="false"
                    :http-request="uploadFile"
                    ref="upload"
                    drag
                    :on-success="fileclear"
                    action="/v1/file/push"
                    clearFiles
                    accept=".TTF,.ttf,.tif"
                    style="margin-top:35%;margin-left:2.5%"  
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    
                </el-upload>
                <el-button style="margin-left: 37%;margin-top:20%;" size="small" type="success" :disabled="isclick" :loading="loads"  @click="submitUpload">上传识别</el-button>
    
             <!--    <el-dialog
                title="识别结果"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                    <el-image 
                    style="width: 100px; height: 100px"
                    :src="imgUrl" 
                    :preview-src-list="srcList">
                  </el-image>
                    <pre>{{ word}}</pre>
                </el-dialog>
 -->         
            </div>
            <div v-show="dialogVisible">
                <p class="words"  ref="UI">{{word}}</p>
            </div>
            <panels :url.asyc="url2"></panels>
        </el-main>
        
    </el-container>
</template>

<script>
import axios from 'axios'; 
import {WoffApi} from '../../api/api'; 
import panels  from '../TestPage/HtmlPanel';
export default {
    name: 'WOFF',
    data() {
        return {
            fileList: [],
            fileData: new FormData(),
            dialogVisible:false,
            word:"中华人民共和国",
            loads:false,
            imgUrl:"",
            ImgName :"",
            hei:100,
            url1:  '' ,
            url2:  'files',
            srcList: []
        }
    },
    components: { panels },
    mounted () {
        this.url1 =  'https://www.bejson.com'
        // this.url2 =  'http://hwdev.xiezixiansheng.com:8888'
    },
    methods: {
        setUI(){
            // this.$refs.UI.style.setProperty("--hei",this.hei);//给变量赋值
        },
        uploadFile(f){
            this.fileData.append("file",f.file);
            this.ImgName = f.file.name
        },
        buildQr: function (f) {
        },
        GetWoff(ttf,msg){
            var that = this;
            let par = {"ttf": that.ImgName,"word": that.word}
            WoffApi(par).then(res =>{
                let {code,msg,data} = res;
                
                if (code == 200){
                    // console.log(datajson);
                    that.dialogVisible = true
                    that.setUI()
                    return data
                }else{
                    that.$message.error("接口返回异常:\n"+data.errMsg);
                }
            }).catch(
                function(error) {
                    // body...
                    that.$message.error("接口请求失败:\n"+error);
            })
        },
        submitUpload() {
            var that = this;
            that.loads = true
            that.$refs.upload.submit();
            that.fileData.append("savepath","tmp");
            axios.post("/v1/file/push",that.fileData,{ retryDelay: 8000 }).then(res => {
                let { code, msg, data } = res;
                if (data.code == 200){
                    that.$message("上传成功")
                    that.loads = false
                    that.GetWoff(that.ImgName,that.word);
                }else{
                    that.$message.error("上传失败"+data.data);
                    that.loads = false
                }
                }).catch(function(error) {
                    that.loads = false
                    that.$message.error("请求发送失败");
            });
        },
        handleClose() {
            this.$message("title","sdfdsfdd")
            this.dialogVisible = false;
            this.qrimg = "";
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }

      

    }

}
</script>

<style type="text/css">

    .div1{
        margin-left: 30%;
        width: 600px;
        height: auto;
        padding: 10px;
        text-align: center;
        background-color: rgba(31, 147, 255, 0.11);
        margin-top: 2%;
        margin-bottom: 10%;
    }
    .words{
        --color:'100px';
        height: var(--color);
        width: 1200px;
        background-color: rgba(186, 231, 206, 0.56);
        margin-top: 10px;
        text-align: center;
        font-size: 60px;
        font-family: 'xin_shi_gu_yin';
    }
    @font-face {
        font-family: 'xin_shi_gu_yin';
        font-style: normal;
        font-weight: 400;
        /*src: url('woff/xin_shi_gu_yin.woff2') format('woff2');*/
    }


</style>
